<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-23 14:21:51
 * @LastEditors: zhayang 1063975710@qq.com
 * @LastEditTime: 2024-07-03 21:50:15
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="fit bg-#fff column relative">
    <div class="model-list-header h-col-auto flex justify-between">
      <div class="flex justify-start h-col flex-wrap">
        <div class="w-300">
          <Input
            v-model="params.keyword"
            placeholder="请输入关键词"
          />
        </div>
        <div class="w-300">
          <el-select
            v-model="params.dispose_switch"
            size="small"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- <div class="w-300">
          <el-select
            v-model="params.ss"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->
        <!-- <div class="w-300">
          <el-select
            v-model="params.ss"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->
        <!-- <div class="w-300">
          <el-select
            v-model="params.ss"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->

        <div class="w-300">
          <el-date-picker
            v-model="params.time"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy/MM/dd"
            size="small"
            value-format="timestamp"
          />
        </div>
        <div class="">
          <el-button
            type="primary"
            size="small"
            :loading="loading"
            @click="search"
          >
            查询
          </el-button>
          <el-button
            size="small"
            :loading="loading"
          >
            导出
          </el-button>
        </div>
      </div>
    </div>
    <div
      class="model-list-body h-col m-t-14 flex flex-col flex-nowrap"
      style="height: calc(100vh - 300px); flex: none"
    >
      <BaseTable
        :columns="column"
        :loading="loading"
        :table-data="tableData"
      >
        <template #action="{ row }">
          <div class="flex">
            <span
              v-if="row.dispose_switch === 2"
              class="ignore"
            >
              已忽略
            </span>
            <span
              v-if="row.dispose_switch === 1"
              class="ignore"
            >
              已处理
            </span>

            <template v-else>
              <el-button
                type="text"
                size="small"
                @click="handle(row)"
              >
                处理
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="noHandle(row)"
              >
                忽略
              </el-button>
            </template>
          </div>
        </template>
      </BaseTable>
      <div class="col-auto m-y-15 p-l-4">
        <Pagination
          :pagination-data="pageData"
          @paginationFun="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Input } from '@/components/bmp/form/index'
import BaseTable from '@/components/bmp/table/index.vue'
import Pagination from '@/components/pagination/pagination'
import { getUnmatchList, operaUnmatch } from '@/api/model'
export default {
  components: {
    Input,
    BaseTable,
    Pagination
  },
  data() {
    return {
      pageData: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      stateList: [
        {
          value: undefined,
          label: '全部状态'
        },
        {
          value: '0',
          label: '未处理'
        },
        {
          value: '1',
          label: '已处理'
        },
        {
          value: '2',
          label: '已忽略'
        }
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      params: {
        keyword: ''
      },
      column: [
        {
          prop: 'model_uniqueid',
          label: 'ID'
        },
        {
          prop: 'query',
          label: '问题'
        },

        {
          prop: 'create_datetime',
          label: '创建时间'
        },
        {
          prop: 'update_datetime',
          label: '更新时间'
        },
        {
          prop: 'action',
          label: '操作'
        }
      ],
      tableData: [],
      loading: false
    }
  },
  created() {},
  methods: {
    search() {
      if (this.params.time) {
        this.params.start_datetime = this.params.time[0]
        this.params.start_datetime = this.params.time[1]
      }
      this.pageData.currentPage = 1
      this.getData()
    },
    // 处理
    handle(row) {
      this.$emit('dispose', row)
    },
    noHandle(row) {
      this.$confirm('是否忽略此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          operaUnmatch({
            dispose_switch: 2,
            model_uniqueid: this.$route.query.uid,
            ids: row.id + ''
          }).then((res) => {
            this.search()
            this.$message({
              type: 'success',
              message: '忽略成功!'
            })
          })
        })
        .catch(() => {})
    },
    changePage(val) {
      this.pageData.currentPage = val.currentPage
      this.pageData.pageSize = val.pageSize
      this.getData()
    },
    getData() {
      this.loading = true
      getUnmatchList({
        model_uniqueid: this.$route.query.uid,
        dispose_switch: this.params.dispose_switch,
        page_num: this.pageData.currentPage,
        limit_size: this.pageData.pageSize
      })
        .then((res) => {
          if (res && res.code === 0) {
            this.tableData = res.data.data
            this.pageData.total = res.data.total
            this.$emit('total', this.pageData.total)
          }
        })
        .catch(() => {
          //
          this.$message.error('获取错误，请重试')
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-item {
  cursor: pointer;

  &:hover {
    background: #f4f5f9;
    border-radius: 4px 4px 4px 4px;
  }
}

.model-video {
  object-fit: cover;
}

.adjust-height {
  width: 100%;
  min-height: 24px;
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: pre-wrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.ignore {
  font-weight: 500;
  font-size: 12px;
  color: #9e9e9e;
  padding: 4px 0;
  display: inline-block;
}

.w-300 {
  margin-bottom: 13px;
}

::v-deep {
  .model-list-header .el-input__inner {
    width: 240px;
  }
}

.search-box {
  width: 240px;
  height: 32px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #dcdcdc;
  position: relative;

  .z-input {
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    border: 0;
    overflow: unset;
    padding-left: 7px;
    outline: none;
  }

  .iconfont {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #797979;
  }

  .search-btn {
    padding: 7px 17px;
    margin-left: 12px;
  }

  .search-btn:hover {
    background: rgba(97, 225, 209, 0.7);
  }
}
</style>
